<template>
    <div class="home">
        <div id="echarts"></div>
        <div>
            <a href="#/add" role="button" class="btn btn-primary">记录</a>
        </div>
    </div>
</template>
<style>
    .home {
        text-align: center;
        padding-top: 10px;
    }

    #echarts {
        display: inline-block;
        margin: 0;
        width: 95%;
        height: 380px;
    }
</style>
<script>
    import * as axios from 'axios';
    import * as echarts from 'echarts';
    import * as moment from 'moment';

    export default {
        name: 'home',
        data() {
            return {
                clientHeight: null,
                data: null
            }
        },
        watch: {
            data(value, old) {
                this.loadEcharts()
            },
            clientHeight(value, old) {
                this.loadEcharts()
            },
        },
        methods: {
            loadEcharts() {
                if (this.data == null) return;
                const myChart = echarts.init(document.getElementById('echarts'));
                const legendData = this.data.map(v => v[0].userName);
                const series = this.data.map(userData => ({
                    type: 'line',
                    name: userData[0].userName,
                    data: userData.map(v => ([v.day, v.level]))
                }))
                const option = {
                    title: {
                        text: '蚂蚁庄园等级曲线'
                    },
                    legend: {
                        show: true,
                        top: 30
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    grid: {
                        left: 45,
                        top: 80,
                        bottom: 35
                    },
                    xAxis: {
                        type: 'time'
                    },
                    yAxis: [{
                        name: '等级',
                        nameLocation: 'middle'
                    }],
                    series: series
                }
                myChart.setOption(option);
            },
            loadData() {
                axios({
                    url: 'https://soccer.dqv5.com/api/info/chicken/records'
                }).then(res => {
                    let d = [];
                    for (var i in res.data) {
                        d.push(res.data[i])
                    }
                    this.data = d;
                })
            }
        },
        mounted: function () {
            this.loadData();
            // 获取浏览器可视区域高度
            this.clientHeight = `${document.documentElement.clientHeight}`          //document.body.clientWidth;
            window.onresize = function temp() {
                this.clientHeight = `${document.documentElement.clientHeight}`;
            };
        }
    }


</script>
